<template>
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="p-5 border-b border-neutral-medium/30 flex justify-between items-center">
            <h3 class="text-lg font-semibold">最近活动</h3>
            <button class="text-primary text-sm hover:underline">查看全部</button>
        </div>

        <div class="p-5">
            <div class="relative">
                <!-- 时间线 -->
                <div class="absolute left-3 top-0 bottom-0 w-0.5 bg-neutral-medium/30"></div>

                <div v-for="(activity, index) in activities" :key="index" class="relative pl-10 pb-6"
                    :class="{ 'last:pb-0': index === activities.length - 1 }">
                    <div class="absolute left-0 top-1 w-6 h-6 rounded-full flex items-center justify-center"
                        :class="activity.iconBgClass">
                        <i :class="activity.iconClass"></i>
                    </div>
                    <div>
                        <p class="text-sm">
                            <span class="font-medium">{{ activity.title }}</span>
                            {{ activity.description }}
                        </p>
                        <p class="text-xs text-neutral mt-1">{{ activity.detail }}</p>
                        <p class="text-xs text-neutral mt-2">{{ activity.time }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
interface Activity {
    title: string
    description: string
    detail: string
    time: string
    iconClass: string
    iconBgClass: string
}

const activities: Activity[] = [
    {
        title: 'CASE-20230510-076',
        description: ' 案件已解决',
        detail: '您已完成产品质量争议案件的处理',
        time: '今天 14:30',
        iconClass: 'fa fa-check text-white text-xs',
        iconBgClass: 'bg-success'
    },
    {
        title: '李娜',
        description: ' 分配了新案件给您',
        detail: 'CASE-20230512-001 服务质量争议',
        time: '今天 10:15',
        iconClass: 'fa fa-user text-white text-xs',
        iconBgClass: 'bg-primary'
    },
    {
        title: '王建国',
        description: ' 发送了新消息',
        detail: '关于CASE-20230511-087案件的补充说明',
        time: '昨天 16:42',
        iconClass: 'fa fa-comment-o text-white text-xs',
        iconBgClass: 'bg-warning'
    },
    {
        title: '系统提醒',
        description: ' 有3个案件即将逾期',
        detail: '请尽快处理CASE-20230509-065等案件',
        time: '昨天 09:30',
        iconClass: 'fa fa-exclamation text-white text-xs',
        iconBgClass: 'bg-danger'
    }
]
</script>
